<template>
  <div class="demo-collapse">
<el-collapse accordion>
 <el-collapse-item name="1">
   <template #title>&nbsp;&nbsp;
     展开查询<el-icon class="header-icon">
       <info-filled />
     </el-icon>
   </template>
   <div>
       <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
       <el-col :span="6"><div class="grid-content ep-bg-purple" />
        供应商编码  <el-input v-model="query.suppliersNo" />
   
      </el-col>
       <el-col :span="6" style="margin-left: 370px"><div class="grid-content ep-bg-purple" />
        
       供应商名称<el-input v-model="query.suppliersName" />
      
       </el-col>
   </el-row>
     
   <el-row :gutter="20" style="width: 1000px;margin-top: -30px;margin-left: 20px;">
   <el-col :span="6" ><div class="grid-content ep-bg-purple" />
     公司类型   <el-select v-model="query.suppliersType" placeholder="请选择">
              <el-option label="公司" value="公司" />
              <el-option label="个人" value="个人" />
              </el-select>
</el-col>

<el-col :span="6"  style="margin-left: 370px"><div class="grid-content ep-bg-purple" />
     国家   <el-select v-model="query.countryId" placeholder="请选择">
              <el-option label="中国" :value="1" />
              </el-select>
</el-col>
<el-col :span="6" style="margin-left: 1000px;"><div class="grid-content ep-bg-purple" />
   <el-button @click="resetForm()">重置</el-button>
   <el-button type="primary" style="width: 100px;" @click="GetData()">查询</el-button>
   <!-- <el-button @click="router.push('/ProducManagement/ProcessRouteAdd')" type="primary">+新增工艺</el-button> -->
</el-col>
</el-row>
   </div>
 </el-collapse-item>

</el-collapse>
</div>
<div style="background-color: white;width: 100%;height: 100%;">
   <h3 style="margin: 15px;">
       <span style="font-size: 17px;font-weight: 700;">供应商列表</span>
   </h3>
   
   <el-button type="success" style="float: right;margin-top: -40px;margin-right: 260px;" @click="router.push('/ProducManagement/SuppliersAdd')">+新增供应商</el-button>
   <el-upload
            class="upload-demo"
            :action="apiurl1 + '/api/ProducManagement/SuppliersImport'"
            multiple
            :limit="3"
            style="float: right;margin-top: -40px;margin-right:90px;"
        >
            <el-button type="primary" >导入</el-button>
        </el-upload>
   <!-- <el-button type="primary" style="float: right;margin-top: -40px;margin-right: 90px;" @click="Import()">导入</el-button> -->
   <el-button type="primary" style="float: right;margin-top: -40px;margin-right: 20px;" @click="Export()">导出</el-button>
   
   <hr  style='background-color:#d3d3d3; height:1px; border:none;'>
   <div style="margin: 20px;">
     <el-table :data="tableData" stripe style="width: 2000px" border :header-cell-style="{background:'#f5f7fa'}">
<el-table-column prop="suppliersId" label="序号" width="80" />
<el-table-column prop="suppliersNo" label="供应商编码" width="180" />
<el-table-column prop="suppliersName" label=" 供应商名称" width="180" />
<el-table-column prop="suppliersType" label="供应商类型" width="180"  />
<el-table-column prop="suppliersAdder" label="供应商地址" width="280" />
<el-table-column prop="suppliersPhone" label="供应商电话" width="120" />
<el-table-column prop="cityId" label="所在城市" width="100" >
  <template #default="{row}">
  <el-text v-if="row.cityId==1">北京</el-text>
  <el-text v-else-if="row.cityId==2">天津</el-text>
  <el-text v-else-if="row.cityId==3">上海</el-text>
  <el-text v-else-if="row.cityId==4">广州</el-text>
  <el-text v-else-if="row.cityId==5">深圳</el-text>
  <el-text v-else-if="row.cityId==6">珠海</el-text>
  <el-text v-else-if="row.cityId==7">石家庄</el-text>
  <el-text v-else-if="row.cityId==8">苏州</el-text>
  <el-text v-else-if="row.cityId==9">杭州</el-text>
  <el-text v-else-if="row.cityId==10">南京</el-text>
  <el-text v-else-if="row.cityId==11">青岛</el-text>
  <el-text v-else-if="row.cityId==12">重庆</el-text>
  <el-text v-else-if="row.cityId==13">长沙</el-text>
  <el-text v-else-if="row.cityId==14">西安</el-text>
  <el-text v-else >成都</el-text>
 </template>
</el-table-column>
<el-table-column prop="handleTime" label="创建时间" width="180">
 <template #default="{row}">
   {{ moment(row.handleTime).format("YYYY-MM-DD HH:mm:ss") }}
 </template>
</el-table-column>
<el-table-column prop="handle" label="创建人" />
<el-table-column prop="suppliersStatus" label="状态">
 <template #default="{row}">
  <el-text v-if="row.suppliersStatus==1" type="primary">有效</el-text>
  <el-text v-else type="danger">无效</el-text>
 </template>
</el-table-column>
<el-table-column label="操作" width="180" >
                <template #default="scope">
                    <el-button  size="small" @click="SuppliersUpdate(scope.row.suppliersId)">编辑</el-button>
                    <el-button  size="small" @click="SuppliersDel(scope.row.suppliersId)">删除</el-button>
                </template>
            </el-table-column>
</el-table>
<!-- 分页 -->
<div >
     <el-pagination
             v-model:current-page="query.pageIndex"
             v-model:page-size="query.pageSize"
             layout="prev, pager, next"
             :total="query.totalCount"
             class="mt-4"
             @current-change="handleCurrentChange"
             style="float: right;"
           />
           <span style="float: right;margin-top: 4px">共{{ query.totalCount }}条</span>
   </div>
   </div>
 
 </div>




</template>

<script lang="ts" setup>
import { reactive, ref,onMounted } from 'vue'
import axios from 'axios'
import moment from 'moment';

const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const apiurl1 = import.meta.env.VITE_APP_API_URL_ProductionAdd;
import router from '@/router';
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
//查询分组字段
const query=reactive({
  suppliersNo:'',
  suppliersName:'',
  suppliersType:'',
  countryId:'',
  pageIndex:1,
  pageSize:8,
  totalCount:0,
  totalPage:0
})

//定义数组 存储数据
const tableData =ref([])
//显示
const GetData=()=>{
axios.post(apiurl+'/api/ShowProducManagement/QuerySuppiler',{
  suppliersNo:query.suppliersNo,
  suppliersName:query.suppliersName,
  suppliersType:query.suppliersType,
  countryId:query.countryId||0,
  pageIndex:query.pageIndex,
  pageSize:query.pageSize
})
.then((res)=>{
console.log(res)
tableData.value=res.data.data.list
query.totalCount=res.data.data.totalCount
query.totalPage=res.data.data.totalPage
})
.catch((err)=>{
console.log(err)
})
}

//钩子函数
onMounted(()=>{
GetData()
})

//分页
const handleCurrentChange = (val: number) => {
query.pageIndex = val;
GetData();
};


//删除
const SuppliersDel=(suppliersId:any)=>{
  ElMessageBox.confirm(
    '确定要删除么?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.post(apiurl1+'/api/ProducManagement/DelSupplier',{
        suppliersId:suppliersId
      })
      .then(res=>{
        console.log(res)
        ElMessage.success('删除成功')
        GetData()
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除失败',
      })
    })
}

//重置
const resetForm=()=>{
  query.suppliersNo=''
  query.suppliersName=''
  query.suppliersType=''
  query.countryId=''

  GetData()
}

//修改
const SuppliersUpdate=(suppliersId:any)=>{
  router.push({
    path:'/ProducManagement/SuppliersEdit',
    query:{
      suppliersId:suppliersId
    }
  })
}

//导出
const Export=()=>{
  location.href=apiurl+`/api/ShowProducManagement/ExportExcel`;
}

</script>









<style>
.el-row {
 margin-bottom: 20px;
}
.el-row:last-child {
 margin-bottom: 0;
}
.el-col {
 border-radius: 4px;
}

.grid-content {
 border-radius: 4px;
 min-height: 36px;
}
</style>
